<template>
  <div id="myLogin">
    <el-dialog title="登录" width="300px" center :visible.sync="isLogin">
      <el-form :model="LoginUser" :rules="rules" status-icon ref="ruleForm" >
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="LoginUser.name"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="LoginUser.pass"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="Login" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
// import { loginApi } from "../request/api"; 
export default {
  data(){
        // 用户名的校验方法
        let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
      const passwordRule = /^[a-zA-Z]\w{5,17}$/;
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(
          new Error("字母开头,长度6-18之间,允许字母数字和下划线")
        );
      }
    };
    return{
      LoginUser:{
        name:'',
        pass:''
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }]
      }
    }
  },
  created(){

  },
  methods:{
    ...mapActions(["setUser", "setShowLogin"]),
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(async valid => {
        //如果通过校验开始登录
        if (valid) {
       const {data:res} =await this.$axios.post("/api/users/login", {
              userName: this.LoginUser.name,
              password: this.LoginUser.pass
            })
       console.log(res);
       if(res.code==='001'){
        this.isLogin=false
        let user=JSON.stringify(res.user)
        localStorage.setItem("user",user)
         // 登录信息存到vuex
         this.setUser(res.data.user);
          // 弹出通知框提示登录成功信息
          this.notifySucceed(res.data.msg);
       }else {
         // 清空输入框的校验状态
          this.$refs["ruleForm"].resetFields();
          // 弹出通知框提示登录失败信息
           this.notifyError(res.data.msg);
              }
        } else {
          return false;
        }
      });
    }
  },
  computed:{
     // 获取vuex中的showLogin，控制登录组件是否显示
     isLogin: {
      get() {
        console.log(this.$store);
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setShowLogin(val);

      }
    }
  }

}
</script>

<style>

</style>